<template>
  <div class="updatepwd">
    <div class="findpwdimg">
      <img src="../../assets/psw-logo-r.png" alt="找回密码" />
    </div>
    <el-card shadow="never">
      <el-row type="flex" align="middle">
        <el-col :span="16">
          <div class="leftcontent">
            <el-form
              :model="findForm"
              :rules="findFormRules"
              ref="findFormRef"
              class="elformcontent"
            >
              <el-form-item prop="userName" v-if="!showChangePwdInput">
                <el-input
                  v-model="findForm.userName"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-mobile-phone"
                >
                </el-input>
              </el-form-item>
              <!-- 获取手机验证码部分 -->
              <el-form-item prop="verifyCode" v-if="!showChangePwdInput">
                <!--  -->
                <el-input
                  v-model="findForm.verifyCode"
                  placeholder="6位短信验证码"
                  prefix-icon="el-icon-tickets"
                  maxlength="6"
                  :readonly="isNotUseful"
                  style="width:48%;margin-right:4%"
                >
                </el-input>
                <el-button
                  style="width:48%"
                  type="info"
                  v-if="isNotUseful"
                  disabled
                  >获取验证码</el-button
                >
                <el-button
                  style="width:48%"
                  @click.prevent="getVerfiy"
                  type="warning"
                  v-else-if="!isdaojishi"
                >
                  {{ verifyButtonText }}
                  <i
                    :class="
                      showLoadingIcon ? 'el-icon-loading el-icon--right' : ''
                    "
                  ></i
                ></el-button>
                <el-button style="width:48%" type="info" disabled v-else>
                  {{ verifyButtonText }}
                </el-button>
              </el-form-item>
              <!-- 修改密码的表单，默认隐藏 -->

              <el-form-item prop="password" v-if="showChangePwdInput">
                <el-input
                  v-model="findForm.password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-key"
                  type="password"
                  maxlength="15"
                  class="userandpwd"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="repassword" v-if="showChangePwdInput">
                <el-input
                  v-model="findForm.repassword"
                  placeholder="请再次输入密码"
                  prefix-icon="el-icon-key"
                  type="password"
                  maxlength="15"
                  class="userandpwd"
                >
                </el-input>
              </el-form-item>
              <div style="color:red">{{ apimsg }}</div>
              <el-form-item v-if="!showChangePwdInput">
                <el-button @click="submitClick" type="primary" class="btnwidth"
                  >提交</el-button
                >
              </el-form-item>
              <el-form-item v-if="showChangePwdInput">
                <el-button
                  @click.prevent="updatePwd"
                  type="primary"
                  class="btnwidth"
                  >修改密码</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="rightcontent">
            <el-button @click="goLogin" type="primary"
              >已有账号，马上登录</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    // 验证手机的规则
    var checkMobile = async (rules, value, cb) => {
      if (!value) {
        this.isNotUseful = true
        return cb(new Error('手机号不可为空'))
      }
      const regMoblie = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
      if (!regMoblie.test(value)) {
        this.isNotUseful = true
        return cb(new Error('请输入合法的手机号'))
      }
      // 查询该手机号是否已经存在
      const { data: res } = await this.isExistUser()
      if (res.code !== '200') {
        this.isNotUseful = true
        return cb(new Error('用户名不存在！'))
      }
      this.isNotUseful = false
      return cb()
    }
    var checkSamePwd = (rules, value, cb) => {
      if (value !== this.findForm.password) {
        return cb(new Error('两次密码输入不一致'))
      }
      return cb()
    }
    var checkVerifyInput = async (rules, value, cb) => {
      if (!value) return cb(new Error('验证码不可为空'))
      // 发送请求验证
      const { data: res } = await this.checkVerify()
      if (res.code === '500') return cb(new Error(res.msg))
      return cb()
    }

    return {
      // 是否显示修改密码的输入框
      showChangePwdInput: false,
      isNotUseful: true,
      // 后台返回的验证信息
      apimsg: '',
      findForm: {
        userName: '',
        password: '',
        repassword: '',
        verifyCode: ''
      },
      findFormRules: {
        userName: [{ validator: checkMobile, trigger: 'blur' }],
        password: [
          {
            required: true,
            message: '密码不可为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '用户名长度在6~15个字符之间',
            trigger: 'blur'
          },
        ],
        repassword: [
          {
            validator: checkSamePwd,
            trigger: 'blur'
          }
        ],
        verifyCode: [{ validator: checkVerifyInput, trigger: 'blur' }]
      },
      showLoadingIcon: false,
      verifyButtonText: '获取验证码',
      isdaojishi: false,
      time: 60
    }
  },
  methods: {
    // 点击修改密码
   updatePwd() {
      this.$refs.findFormRef.validate(async v => {
        if(!v) return this.$message.error('输入不合法')
        const { data: res } = await this.$http.post(
          'changePassword.do',
          this.findForm
        )
        if(res.code==='500'){
          this.apimsg = res.msg
          return
        }
        this.$message.success('修改密码成功')
        this.$router.push('/login')
      })
      
  
    },
    // 验证验证码输入是否正确
    checkVerify() {
      return this.$http.get('checkVerifyInput.do', {
        params: {
          userName: this.findForm.userName,
          verifyCode: this.findForm.verifyCode
        }
      })
    },
    // 获取验证码
    async getVerfiy() {
      this.showLoadingIcon = true
      const { data: res } = await this.$http.get('sendVerifyCode.do', {
        params: {
          userName: this.findForm.userName
        }
      })
      if (res.code !== '200') {
        this.showLoadingIcon = false
        return this.$message.error(res.msg + ',请等待2分钟后重试')
      }
      this.showLoadingIcon = false
      // 倒计时60秒
      this.isdaojishi = true
      let me = this
      const intervalShow = function() {
        me.verifyButtonText = '(' + me.time + 's) 重新获取'
        --me.time
        if (me.time < 0) {
          me.verifyButtonText = '获取验证码'
          me.isdaojishi = false
          me.time = 120
          window.clearInterval(id)
        }
      }
      intervalShow()
      let id = window.setInterval(intervalShow, 1000)
    },
    // 根据用户输入的手机号判断是否存在
    isExistUser() {
      return this.$http.get('isExistUser.do', {
        params: {
          userName: this.findForm.userName
        }
      })
    },
    // 返回登录页面
    goLogin() {
      this.$router.push('/login')
    },
    // 点击提交
    submitClick() {
      this.$refs.findFormRef.validate(valid => {
        if (!valid) {
          return this.$message.error('输入不合法')
        }
        this.showChangePwdInput = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.updatepwd {
  height: 100%;
  background-image: url('../../assets/bgzhuce.jpg');
}

.rightcontent {
  display: flex;
  justify-content: center;
}

.el-card {
  height: 500px;
  width: 700px;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  color: #979797;
}

.leftcontent {
  min-height: 460px;
  border-right: 1px dashed grey;
  display: flex;
  justify-content: center;
  align-items: center;
}

.elformcontent {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btnwidth {
  width: 100%;
}

.el-form-item {
  width: 70%;
}

.findpwdimg {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-380%, 120%);
}

.el-form-item {
  margin-bottom: 40px;
}
</style>
